<template>
    <div class="box">
        <img class="img" src="@/assets/imgs/404/404.png" alt="404未找到页面">
        <div class="note">ERROR 404<br>页面好像走丢到异次元了...</div>
    </div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.box {
    height: 100vh;
    background: linear-gradient(135deg, #0a192f 0%, #172a45 100%); /* 科技感深蓝渐变背景 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .img {
        width: 600px;  /* 调整图片尺寸更协调 */
        height: 600px;
        filter: drop-shadow(0 0 30px rgba(100, 255, 218, 0.2)); /* 图片发光投影 */
    }

    .note {
        position: relative;
        top: -50px;  /* 调整文字位置 */
        color: #64ffda;  /* 科技感亮青色 */
        font-family: 'Consolas', monospace;  /* 等宽字体更符合科技感 */
        font-size: 24px;
        text-align: center;
        text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);  /* 文字发光效果 */
        letter-spacing: 2px;  /* 字符间距 */
    }
}
</style>